<template>
	<view class="eat">
		<!-- <text class="eat-title">一日三餐</text> -->
		<view class="tar-top" @click="getTarget($event)">
			<text id="sf" :class="{active:index==1}">食物</text>
			<text id="sm" :class="{active:index==2}">菜谱</text>
		</view>
			<sfood :name="name" v-if="index==1"></sfood>
			<smenu :name="name" v-if="index==2"></smenu>
	</view>
</template>

<script>
	import sfood from './sfood.vue'
	import smenu from './smenu.vue'
	export default {
		data() {
			return {
				index:1,
				name:null
			}
		},
		components: {sfood,smenu},
		methods: {
			getTarget(e) {
				if(e.target.id=='sf'){
					this.index=1
				}else if(e.target.id=='sm'){
					this.index=2
				}
			},
	
		},
		onLoad(options) {
				this.name = options.name;
			uni.setNavigationBarTitle({
				title: this.name
			});
		}
	}
</script>

<style lang="scss">
	.eat {
		
		.tar-top {
			width: 93vw;
			display: flex;
			text-align: center;
			
			#sf,
			#sm {
				flex: 1;
				padding: 0 10px 10px 10px;
			}
			.active{
				border-bottom:  2px solid red;
				color: red;
			}
		}
		
	}
</style>